import React from 'react';
import { connect } from 'dva/index';
import { Col, Form, Input, InputNumber, Row, Tabs, Icon, Upload } from 'antd';

const { TabPane } = Tabs;
const FormItem = Form.Item;


const orderSupplementInfo = Form.create()(
  class CreateForm extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props: any) {
      super(props);
    }

    handleExportBillOfLading = (p: this) => {}

    ExportBillOfLading = () => {}

    handleCollectForm = () => {}

    checkOrderSupplementInfo = () => {}

    onAnalysisFile = () => {}

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
      const divWithOutBorderBottom = {
        display: 'flex',
        borderRight: '1px solid #e9e9e9',
        borderLeft: '1px solid #e9e9e9',
        borderTop: '1px solid #e9e9e9',
        borderSpacing: 0,
        lineHeight: 3.5,
        textAlign: 'left',
      };

      const columnBreak = {
        display: 'flex',
        borderRight: '1px solid #e9e9e9',
        borderLeft: '1px solid #e9e9e9',
        borderTop: '1px solid #e9e9e9',
        borderSpacing: 0,
        textAlign: 'left',
      };

      const fileBorderBottom = {
        display: 'flex',
        borderRight: '1px solid #5993F4',
        borderLeft: '1px solid #5993F4',
        borderBottom: '1px solid #5993F4',
        borderTop: '1px solid #5993F4',
        fontSize: '10px',
      };


      // @ts-ignore
      const tableDesc = <div style={divWithOutBorderBottom}>
        <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9', textAlign: 'center' }}>
          <div>PARTICULARS FURNISHED BY SHIPPER</div>
        </div>
      </div>;

      // @ts-ignore
      const tableDesc2 = <div style={divWithOutBorderBottom}>
        <div style={{ width: '20%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
          <div>Container Nos./Seal Nos.<br/>
            Marks & Nos.
            <span>
                {getFieldDecorator('containerNos', {
                  initialValue: '',
                })(
                  <Input.TextArea maxLength={50} style={{ width: '93%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 5, maxRows: 7 }}/>,
                )}
            </span>
          </div>
        </div>
        <div style={{ width: '15%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
          <div>Quantity/Number of
            <br /> Packages
            <span>
                {getFieldDecorator('packagesNum', {
                  initialValue: '',
                })(
                  <Input.TextArea maxLength={11} style={{ width: '91%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 5, maxRows: 7 }} />,
                )}
            </span>
          </div>
        </div>
        <div style={{ width: '30%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
          <div>Description of Goods
            <span>
                {getFieldDecorator('goosDesc', {
                  initialValue: '',
                })(
                  <Input.TextArea maxLength={300} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 7, maxRows: 9 }} />,
                )}
            </span>
          </div>
        </div>
        <div style={{ width: '15%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
          <div>Gross Weight
            <br /> KGS
            <span>
                {getFieldDecorator('grossWeight', {
                  initialValue: '',
                })(
                  <Input.TextArea maxLength={100} style={{ width: '91%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 5, maxRows: 7 }} />,
                )}
            </span>
          </div>
        </div>
        <div style={{ width: '20%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
          <div>Measurement
            <br /> CBM
            <span>
                {getFieldDecorator('measurement', {
                  initialValue: '',
                })(
                  <Input.TextArea maxLength={18} style={{ width: '92%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 5, maxRows: 7 }} />,
                )}
            </span>
          </div>
        </div>
      </div>;

      // @ts-ignore
      const tableDesc3 = <div style={divWithOutBorderBottom}>
        <div style={{ width: '50%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
          <div style={{ lineHeight: '20px' }}>Total No.of containers or
            <br />packages （in words） :
            <span>
                {getFieldDecorator('containerNosDesc', {
                  initialValue: '',
                })(
                  <Input.TextArea maxLength={300} style={{ width: '92%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 3, maxRows: 4 }} />,
                )}
            </span>
          </div>
        </div>
        <div style={{ width: '50%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
          <div>SHIPPED ON BOARD DATE :
            <span>
                  {getFieldDecorator('etdDate', {
                    initialValue: '',
                  })(
                    <Input maxLength={20} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                  )}
              </span>
          </div>
        </div>
      </div>;

      return (
        <div>
          <Form>
            <Tabs tabPosition="top">
              <TabPane tab="提单补料" key="1">
                <div style={Object.assign({}, { marginTop: 5, width: '100%' }, fileBorderBottom)}>
                  <div>
                    <Row>
                      <Col span={6} style={{ marginTop: 10, marginLeft: 65, marginBottom: 20 }}>
                        <a href="#">下载补料模版</a>
                      </Col>
                    </Row>
                    <Row>
                      <Col span={24} style={{ marginLeft: 45 }}>
                        <FormItem {...formItemLayout} label={<span className="ant-form-item-required">上传补料信息</span>} hasFeedback>
                          <Upload.Dragger>
                            <p className="ant-upload-drag-icon">
                              <Icon type="inbox"/>
                            </p>
                            <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                          </Upload.Dragger>
                        </FormItem>
                      </Col>
                    </Row>
                  </div>
                </div>

                <div style={Object.assign({}, { marginTop: 10, marginBottom: 18, width: '100%' }, fileBorderBottom)}>
                  <div style={{ width: '90%', marginLeft: 50 }}>
                    <div style={{ textAlign: 'left', marginTop: 20, marginBottom: 10 }}>
                      {/* eslint-disable-next-line max-len */}
                      <div><span><b>GUANGZHOU HENDA SPECIALTY OF SUPPLY CHAIN MANAGEMENT CO, LTD</b></span></div>
                    </div>

                    {/* eslint-disable-next-line max-len */}
                    <div style={Object.assign({}, { lineHeight: 3.5 }, columnBreak)}>
                      <div style={{ width: '44%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>Shipper &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('shipper', {
                                initialValue: '',
                              })(
                                <Input.TextArea maxLength={100} style={{ width: '79%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 5, maxRows: 6 }} />,
                              )}
                          </span>
                        </div>
                      </div>
                      <div style={{ width: '55%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>Bill Of Lading No&nbsp;
                          <span>
                              {getFieldDecorator('ladingBill', {
                                initialValue: '',
                              })(
                                <Input maxLength={50} style={{ width: '75%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                        <div style={{ borderTop: '1px solid #e9e9e9' }}>Booking No &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('soNo', {
                                initialValue: '',
                              })(
                                <Input maxLength={50} style={{ width: '81%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                        <div style={{ borderTop: '1px solid #e9e9e9' }}>Export Reference &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('exportReference', {
                                initialValue: '',
                              })(
                                <Input maxLength={200} style={{ width: '74%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                      </div>
                    </div>

                    <div style={Object.assign({}, { lineHeight: 2 }, columnBreak)}>
                      <div style={{ width: '45%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>Consignee &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('consignee', {
                                initialValue: '',
                              })(
                                <Input.TextArea maxLength={100} style={{ width: '79%', marginTop: 15, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 6, maxRows: 9 }} />,
                              )}
                          </span>
                        </div>
                      </div>
                      <div style={{ width: '27%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>Pre-Carriage by
                          <span>
                              {getFieldDecorator('preCarriage', {
                                initialValue: '',
                              })(
                                <Input maxLength={100} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                        <div style={{ borderTop: '1px solid #e9e9e9' }}>Vessel/Voyage Number: &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('vessel', {
                                initialValue: '',
                              })(
                                <Input maxLength={100} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                      </div>
                      <div style={{ width: '28%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>Place Of Receipt &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('receiptPlace', {
                                initialValue: '',
                              })(
                                <Input maxLength={200} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                        <div style={{ borderTop: '1px solid #e9e9e9' }}>Port Of Loading &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('loadingPort', {
                                initialValue: '',
                              })(
                                <Input maxLength={50} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                      </div>
                    </div>

                    <div style={Object.assign({}, { lineHeight: 2 }, columnBreak)}>
                      <div style={{ width: '45%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>Notify Party &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('notifyParty', {
                                initialValue: '',
                              })(
                                <Input.TextArea maxLength={100} style={{ width: '76%', marginTop: 15, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 5, maxRows: 6 }} />,
                              )}
                          </span>
                        </div>
                      </div>
                      <div style={{ width: '27%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>Port Of Discharge &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('destinationPort', {
                                initialValue: '',
                              })(
                                <Input maxLength={50} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                        <div style={{ borderTop: '1px solid #e9e9e9' }}>Number of original B/Ls &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('originalBilllNum', {
                                initialValue: '',
                              })(
                                <InputNumber maxLength={11} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                      </div>
                      <div style={{ width: '28%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>Place of Delivery  &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('deliveryPlace', {
                                initialValue: '',
                              })(
                                <Input maxLength={300} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                        <div style={{ borderTop: '1px solid #e9e9e9' }}>Merchant Declared Value &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('declaredValue', {
                                initialValue: '',
                              })(
                                <Input maxLength={300} style={{ width: '95%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                              )}
                          </span>
                        </div>
                      </div>
                    </div>

                    {tableDesc}
                    {tableDesc2}
                    {tableDesc3}

                    <div style={Object.assign({}, { lineHeight: 6, borderBottom: '1px solid #e9e9e9', marginBottom: 20 }, columnBreak)}>
                      <div style={{ width: '40%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                        <div>FREIGHT & CHARGES
                          <span>
                              {getFieldDecorator('freightCharges', {
                                initialValue: '',
                              })(
                                <Input.TextArea maxLength={300} style={{ width: '90%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 3, maxRows: 4 }} />,
                              )}
                          </span>
                        </div>
                        {/* eslint-disable-next-line max-len */}
                        {/* eslint-disable-next-line react/no-unescaped-entities */}
                        <div style={{ borderTop: '1px solid #e9e9e9' }}>Agent's Address at Destination :
                          <span>
                              {getFieldDecorator('destinationPortAgency', {
                                initialValue: '',
                              })(
                                <Input.TextArea maxLength={300} style={{ width: '90%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 7, maxRows: 8 }} />,
                              )}
                          </span>
                        </div>
                      </div>
                      <div style={{ width: '60%', marginLeft: 10, borderRight: '1px solid #e9e9e9', lineHeight: '20px' }}>
                        <div>
                          {/* eslint-disable-next-line max-len */}
                          Received in apparent good order and condition except as otherwise noted the total number of containers or other packages or units enumerated below for  transportation from the place of receipt to the place of delivery subject to the terms and conditions hereof.
                          {/* eslint-disable-next-line max-len */}
                          One of the Bills of Lading must be surrendered duly endorsed in exchange for the goods or delivery order.
                          {/* eslint-disable-next-line max-len */}
                          On presentation of this document duly endorsed to Carrier by or on behalf of the Holder of the Bill of Lading, the rights and liabilities arising in accordance with the terms and conditions here of shall, without prejudice to any rule of common law or statute rendering them binding on the Merchant, become binding in all respects between the Carrier and the Holder of the Bill of Lading as though the contract evidenced hereby had been made between them.
                          {/* eslint-disable-next-line max-len */}
                          IN WITNESS whereof the number of original Bill of Lading stated under have been signed all of this tenor and date, one of which being accomplished.
                          The other(s) is to be void.
                        </div>
                        <div style={{ borderTop: '1px solid #e9e9e9' }}>PLACE & DATE OF ISSUE : &nbsp;&nbsp;
                          <span>
                            {getFieldDecorator('issuePlace', {
                              initialValue: '',
                            })(
                              <Input maxLength={300} style={{ width: '67%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} />,
                            )}
                        </span>
                        </div>

                        <div style={{ borderTop: '1px solid #e9e9e9' }}>Agent for the Carrier: &nbsp;&nbsp;
                          <span>
                              {getFieldDecorator('carrierAgency', {
                                initialValue: '',
                              })(
                                <Input.TextArea maxLength={300} style={{ width: '72%', marginTop: 5, marginBottom: 5, textAlign: 'center' }} autosize={{ minRows: 3, maxRows: 4 }} />,
                              )}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </TabPane>
            </Tabs>

            <Tabs tabPosition="top">
              <TabPane tab="提单补料凭证" key="1">
                <Row>
                  {/* eslint-disable-next-line max-len */}
                  <Col span={4} style={{ marginLeft: 90, marginTop: 10, marginBottom: 10 }}>
                    <a href="#" onClick={this.ExportBillOfLading.bind(this)}>导出提单补料确认件</a>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label={<span className="ant-form-item-required">提单确认件</span>} hasFeedback>
                      <Upload.Dragger>
                        <p className="ant-upload-drag-icon">
                          <Icon type="inbox"/>
                        </p>
                        <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                      </Upload.Dragger>
                    </FormItem>
                  </Col>
                </Row>
              </TabPane>
            </Tabs>

          </Form>
        </div>
      )
    }
  })

function mapStateToProps(state: any) {
    return {
      loading: state.loading.models.order, order: state.order,
    };
}

export default connect(mapStateToProps)(orderSupplementInfo);
